 <template>
 <div>
          <div class="crumbs">
            <el-breadcrumb separator="/">
                <h3 style="color #DDDDDD">当前位置:自动排考管理/自动排考设置</h3>
            </el-breadcrumb>
          </div>
          <el-form ref="form" :model="sizeForm" label-width="40px" size="mini">
            <el-form-item label="时间">
              <el-col :span="11">
				  <el-select v-model="sizeForm.time" placeholder="请选择">
				      <el-option
				        v-for="item in options"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
              </el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker placeholder="选择日期" v-model="sizeForm.date2" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-form>
          <h5>上午 08:00-10:00 10:20-12:20 下午 14:00—16:00 16:20-18:20</h5>
          <el-checkbox label="相同科目是否合班" name="type"></el-checkbox>
          <h5>考试任务,考试教室,监考老师信息请在基础信息设置部分完成,否则您无法进行派监考处理</h5>
          <el-button  @click="submitForm">生成预览</el-button>
		  <el-button  @click="outExcel">导出excel</el-button>
		  <el-button  @click="deleteExcel">清空excel</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column  
        prop="id"
        label="排考编号"
        width="250">
      </el-table-column>
      <el-table-column
        prop="date"
        label="考试日期"
        width="250">
      </el-table-column>
      <el-table-column
        prop="time"
        label="考试时间"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="classroomObj.classroomname"
        label="考试教室"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="teacherObj.mainteacher"
        label="监考教师1"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="teacherObj.viceteacher"
        label="监考教师2"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="classname"
        label="考试班级"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="course"
        label="考试科目"
        width="250"
        >
      </el-table-column>
    </el-table>
    <el-pagination
    background
  layout="prev, pager, next"
  :page-size="currentPage.page"
  :total="currentPage.total"
  :page-count="currentPage.count"
  :current-page="currentPage.current"
  @current-change="page">
  
  >
</el-pagination>
 </div>
</template>
<script>
  import{classpostmethod,autoFind} from '../api/index.js'
  import {xlsx} from '../components/XLSX_2_0.js'
    export default {
        created(){
           // this.getdata(1);
        },
        methods: {
			deleteExcel(){
				this.data.length=0
				this.$message({
				          message: '清空成功！',
				          type: 'success'
				        });
			},
			outExcel(){
				if(this.data.length!=0){
					xlsx(this.data,this.listHander,'排考')
					this.data.length=0
				}else{
					this.$message({
					          message: '请先筛选数据',
					          type: 'warning'
					        });
				}
			},
          submitForm(){
		    if(this.sizeForm.time!=''&&this.sizeForm.date1!=''&&this.sizeForm.date2!=''){
				autoFind(Object.assign({},this.sizeForm)).then(res=>{
					 
						 this.tableData=res.data
						 for( var idx in this.tableData){
							 var temp=this.tableData[idx];
							 var dataTemp={
								 id:temp.id,
								 date:temp.date,
								 time:temp.time,
								 classroomname:temp.classroomObj.classroomname,
								 mainteacher:temp.teacherObj.mainteacher,
								 viceteacher:temp.teacherObj.viceteacher,
								 classname:temp.classname,
								 course:temp.course
							 }
							 this.data.push(dataTemp);
						 }
					 
				});
			}

          },
          getdata(obj){
            this.currentPage.page=obj
            classpostmethod(this.currentPage).then(Object=>{
              this.tableData=Object.records[0];
                console.log(Object);
                this.currentPage.total=Object.rowCount;
                this.currentPage.page=Object.pageCurrent;
            })
          },
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                this.currentPage.current=currentPage;
                 this.getdata();  
            }
        },
        data() {
            return {
				listHander:{
					id:"排考编号",
					date:"考试日期",
					time:"考试时间",
					classroomname:"考试教室",
					mainteacher:"监考教师1",
					viceteacher:"监考教师2",
					classname:"考试班级",
					course:"考试科目"
				},
				data:[],
                total: null,
                tableData: null,
                dialogFormVisible:false,
				options:[
					{label:"上午 08:00-10:00",value:"08:00:00-10:00:00"},
					{label:"上午 10:20-12:20",value:"10:20:00-12:20:00"},
					{label:"下午 14:00-16:00",value:"14:00:00-16:00:00"},
					{label:"下午 16:20-18:20",value:"16:20:00-18:20:00"}
				],
                currentPage:{
                  page:1,
                  total:20,
                  count:50,
                  current:0 ,
                  limit:10
                },
                sizeForm:{
                  date1: '',
                  date2: '',
				  time:''
                }
            }
        }
    }
</script>